<template>
  <!-- 权限管理页面 -->
  <div class="permission">
    <el-card class="rig">
      <el-button type="primary" size="small" @click="addEvent">添加权限</el-button>
    </el-card>

    <el-table
      :data="list"
      border
      class="top"
      row-key="id"
    >
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="标识" align="center" prop="code" />
      <el-table-column label="描述" align="center" prop="description" />
      <el-table-column label="操作" align="center">
        <template #default="{row}">
          <el-button type="text" @click="addEvent2(row.id)">添加</el-button>
          <el-button type="text" @click="editEvent(row)">编辑</el-button>
          <el-button type="text" @click="shanchu(row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <Add ref="Add" @getData="getData" />
  </div>
</template>
<script>
import { sysPermission, sysPermissionDetele } from '@/api/permission'
import Add from './components/Add.vue'
export default {
  components: {
    Add
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysPermission()
      console.log(res)
      this.list = this.changeData(res.data, '0')
    },
    /* 转换成树形结构数据 */
    /* 第一步 找到第一层 */
    /* 第二步 将参数改为pid */
    /* 第三步 给找到的每一项添加一个 空数组 */
    /* 第四步 利用递归 让children 调用 changeData方法 且 子的pid 就是当前每一项的id */
    changeData(arr, pid) {
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    /* 这是页面的 新增 */
    addEvent() {
      /* 第一步打开对话框 */
      this.$refs.Add.isShow = true
      /* 当打开的是第一层的弹出框时 */
      this.$refs.Add.form.type = 1
      this.$refs.Add.form.pid = '0'
      this.$refs.Add.mode = 'add'
    },
    /* 这是按钮的 新增 */
    addEvent2(id) {
      this.$refs.Add.isShow = true
      this.$refs.Add.form.type = 2
      this.$refs.Add.form.pid = id
      this.$refs.Add.mode = 'add'
    },
    /* 这是编辑的事件 */
    editEvent(row) {
      /* 第一步 当点击编辑的时候 打开对话框 */
      this.$refs.Add.isShow = true
      /* 第二步 做数据回显 深度回显*/
      this.$refs.Add.form = JSON.parse(JSON.stringify(row))
      /* 给他们设置一个 不同的变量 就可以按下对应的 按钮 显示对应的标题  和 发送 对应的请求 */
      this.$refs.Add.mode = 'edit'
    },
    /* 删除按钮功能 */
    async shanchu(id) {
      await sysPermissionDetele(id)
      /* 删除成功后提示删除成功 */
      this.$message.success('删除成功')
      /* 然后重新刷新页面 */
      this.getData()
    }
  }
}
</script>
<style scoped lang="scss">
.permission{
  padding: 20px;
}
.top{
  margin-top: 30px;
}
.rig{
  text-align: right;
}
</style>
